<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" :hasFixedFlag="true" bgColor="usuallyBgQy" :needConBlock="true">
			<block slot="content">我的</block>
		</custom-nav-sq-xcx>
		<view class="mineWrap">
			<view class="headInfo posRel">
				<view class="userHead"></view>
				<view class="userInfo">
					<!-- <view class="userName">张珊珊</view>
					<view class="qyName">暂未加入企业</view> -->
					<view class="userName spaceBet">
						<text>张珊珊</text>
						<text class="iconfont icon-qi"></text>
					</view>
					<view class="qyName">
						<text>濮阳和心文化传媒有限公司</text>
						<text class="iconfont icon-gengduo"></text>
					</view>
				</view>
				<!-- <view class="scanJoin posAbso">
					<view class="iconfont icon-saoma"></view>
					<view class="joinTxt">加入企业</view>
				</view> -->
			</view>
			<!-- 企业入驻 -->
			<view class="qyRz comCls spaceBet alignCen">
				<view class="hasFlex alignCen">
					<view class="iconBox flexAll">
						<view class="iconfont icon-qyrz hasLinear"></view>
					</view>
					<view class="rzTit">企业入驻</view>
				</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
			<!-- 模块 -->
			<view class="modWrap comCls hasFlex">
				<view class="modItem">
					<view class="iconfont icon-qyTtcp hasLinear"></view>
					<view>团体测评</view>
				</view>
				<view class="modItem">
					<view class="iconfont icon-qyPerCp hasLinear"></view>
					<view>个人测评</view>
				</view>
				<view class="modItem">
					<view class="iconfont icon-qyKc hasLinear"></view>
					<view>企业课程</view>
				</view>
				<view class="modItem">
					<view class="iconfont icon-qyMykc"></view>
					<view>我的课程</view>
				</view>
			</view>
			<view class="myOrder comCls">
				<view class="modTit spaceBet" style="margin-bottom: 20rpx;" @tap="goMyTtfw">
					<view class="hasFlex alignCen">
						<view class="iconBox flexAll otherBg">
							<view class="iconfont icon-qyHd hasLinear"></view>
						</view>
						<view class="rzTit">团体服务</view>
					</view>
					<view class="iconfont icon-gengduo"></view>
				</view>
				<today-ttfw></today-ttfw>
			</view>
			<view class="qyRz comCls spaceBet alignCen">
				<view class="hasFlex alignCen">
					<view class="iconBox flexAll otherBg">
						<view class="iconfont icon-qyTthd  hasLinear"></view>
					</view>
					<view class="rzTit">企业活动</view>
				</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
			<!-- 我的订单 -->
			<view class="myOrder comCls">
				<view class="modTit">
					<image class="modImg" :src="getQyStaticFilePath('myOrder.png')"></image>
					<text>我的订单</text>
				</view>
				<view class="modWrap hasFlex">
					<view class="modItem">
						<view class="iconfont icon-qyCpOrder"></view>
						<view>测评订单</view>
					</view>
					<view class="modItem">
						<view class="iconfont icon-qyPerCp hasLinear"></view>
						<view>咨询订单</view>
					</view>
					<view class="modItem">
						<view class="iconfont icon-qyZx"></view>
						<view>倾诉订单</view>
					</view>
					<view class="modItem">
						<view class="iconfont icon-qyKc hasLinear"></view>
						<view>资源订单</view>
					</view>
				</view>
			</view>
			<!-- listItem -->
			<view class="myOrder comCls">
				<view class="myListItem alignCen">
					<view class="iconBox flexAll">
						<image class="myPj" :src="getQyStaticFilePath('myPj.png')"></image>
					</view>
					<view class="list spaceBet">
						<view>我的评价</view>
						<view class="iconfont icon-gengduo"></view>
					</view>
				</view>
				<view class="myListItem alignCen">
					<view class="iconBox flexAll">
						<view class="iconfont icon-wenti hasLinear"></view>
					</view>
					<view class="list spaceBet">
						<view>我的问答</view>
						<view class="iconfont icon-gengduo"></view>
					</view>
				</view>
				<view class="myListItem alignCen">
					<view class="iconBox flexAll otherBg">
						<view class="iconfont icon-yulan"></view>
					</view>
					<view class="list spaceBet">
						<view>我的关注</view>
						<view class="iconfont icon-gengduo"></view>
					</view>
				</view>
				<view class="myListItem alignCen">
					<view class="iconBox flexAll">
						<view class="iconfont icon-qyWj"></view>
					</view>
					<view class="list spaceBet">
						<view>我的问卷</view>
						<view class="iconfont icon-gengduo"></view>
					</view>
				</view>
				<view class="myListItem alignCen">
					<view class="iconBox flexAll otherBg">
						<view class="iconfont icon-qyTips"></view>
					</view>
					<view class="list spaceBet">
						<view>帮助中心</view>
						<view class="iconfont icon-gengduo"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TodayTtfw from '../subQyMine/myTtfw/components/TodayTtfw.vue'
	export default {
		components:{
			TodayTtfw
		},
		methods:{
			goMyTtfw(){
				uni.navigateTo({
					url:"/pages/subQyMine/myTtfw/myTtfw"
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $pss-qy-main;
	}
</style>
<style lang="scss" scoped>
	$lightBlue:lighten($pss-qy-main, 38%);
	$iconBgSize:56rpx;
	$iconBorRad:12rpx;
	.comCls{
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 30rpx
	}
	.mineWrap{
		padding: 15rpx 30rpx;
		.headInfo{
			@extend .comCls;
			display: flex;
			.userHead{
				width: 120rpx;
				height: 120rpx;
				background: pink;
				border-radius: 8rpx;
				margin-right: 15rpx;
			}
			.userInfo{
				flex: 1;
				color: $qy-main2;
				font-size: 26rpx;
				.userName{
					font-size: 32rpx;
					font-weight: 600;
					align-items: center;
					.icon-qi{
						font-weight: normal;
						font-size: 42rpx;
						color: $pss-qy-main;
					}
				}
				.qyName{
					margin-top: 40rpx;
					.icon-gengduo{
						font-size: 20rpx;
						margin-left: 15rpx;
					}
				}
			}
			.scanJoin{
				text-align: center;
				right: 20rpx;
				top: 30rpx;
				font-size: 24rpx;
				color: $pss-qy-main;
				.icon-saoma{
					font-size: 60rpx;
				}
				.joinTxt{
					height: 38rpx;
					line-height: 38rpx;
					padding: 0 15rpx;
					background: #CFEDFF;
					border-radius: 8rpx;
					border: 1rpx solid $lightBlue;
					margin-top: 5rpx;
				}
			}
		}
		.hasLinear{
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.iconBox{
			width: $iconBgSize;
			height: $iconBgSize;
			background: $lightBlue;
			border-radius: $iconBorRad;
			margin-right: 15rpx;
			.icon-qyrz{
				font-size: 42rpx;
				background-image: linear-gradient(180deg, #74A9F3 0%, #1677FF 100%);
			}
			.icon-qyHd,
			.icon-qyTthd{
				font-size: 36rpx;
				background-image:linear-gradient(180deg, #E46E46 0%, #EC643A 100%);
			}
			.myPj{
				width: 46rpx;
				height: 46rpx;
			}
			.icon-wenti{
				font-size: 36rpx;
				background-image:linear-gradient(180deg, #74A9F3 0%, #1677FF 100%);
			}
			.icon-yulan{
				color: #FF7744;
				font-size: 36rpx;
			} 
			.icon-qyWj{
				color: $pss-qy-main;
				font-size: 40rpx;
			}
			.icon-qyTips{
				color: #E56D45;
				font-size: 38rpx;
			}
			&.otherBg{
				background: lighten(#FF7744, 30%); 
			}
		}
		.rzTit,
		.modTit{
			font-size: 28rpx;
			color: $qy-main2;
			font-weight: 600;
		}
		.modTit{
			display: flex;
			align-items: center;
			height: 60rpx;
			.modImg{
				width: 38rpx;
				height: 38rpx;
				margin-right: 15rpx;
			}
		}
		.icon-gengduo{
			font-size: 22rpx;
			color: $qy-mainb;
		}
		.modItem{
			flex: 1;
			padding: 15rpx 0;
			text-align: center;
			font-size: 26rpx;
			color: $qy-main2;
			position: relative;
			.iconfont{
				font-size: 36rpx;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto 10rpx;
			}
			.icon-qyTtcp{
				background-image: linear-gradient(180deg, #E46E46 0%, #EC643A 100%);
			}
			.icon-qyPerCp{
				background-image: linear-gradient(180deg, #72C04B 0%, #4AAD53 100%);
			}
			.icon-qyKc{
				background-image: linear-gradient(180deg, #79ACF2 0%, #1677FF 100%);
			}
			.icon-qyMykc,
			.icon-qyCpOrder{
				color: $pss-qy-main;
			}
			.icon-qyMykc{
				font-size: 56rpx;
			}
			.icon-qyZx{
				font-size: 50rpx;
				color: #F99704;
			}
			&::after{
				content: "";
				width: 1rpx;
				height: 50rpx;
				background: #e5e5e5;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -25rpx;
			}
			&:last-child::after{
				background: transparent;
			}
		}
		.myListItem{
			display: flex;
			margin-bottom: 10rpx;
			.list{
				flex: 1;
				align-items: center;
				font-size: 28rpx;
				color: $qy-main2;
				border-bottom: 1rpx solid #e5e5e5;
				height: 80rpx;
			}
		}
	}
</style>